<template>
  <div class="user">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">收发类别管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')" v-if="USER.auth.indexOf('base_shoufaleibie_add')!==-1">新增收发类别</el-button>
      </div>
      <s-table
        :expand="false"
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          slot="operation"
          align="center"
          label="可用操作"
          width="100">
          <template slot-scope="s">
            <el-button type="primary" icon="edit" size="mini" @click="tableEdit(s.row)" v-if="USER.auth.indexOf('base_shoufaleibie_edit')!==-1"></el-button>
          </template>
        </el-table-column>
        <el-row>
          <el-col :xs="24" :lg="{span: 4, offset: 0}">
            <el-form-item label="类型名称" prop="ddlx">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_ddlx"
                        placeholder="类型名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="订单分类" prop="fl">
              <el-select v-model="autoVue_table_fl"
                         placeholder="订单分类">
                <el-option
                  label="全部"
                  value=""></el-option>
                <el-option
                  label="入库单"
                  value="0"></el-option>
                <el-option
                  label="出库单"
                  value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}收发类别</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item label="货主名称">
              <div class="s-content">
                <el-tag type="success">{{USER.hz[0]? USER.hz[0].show_hzid : '暂无货主'}}</el-tag>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="ddlx" label="类型名称">
              <el-input
                type="text"
                @keyup.enter.native="getkuweiFocus(1)"
                ref="leixingmc"
                v-model="formDialog.ddlx"
                placeholder="类型名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="fl" label="订单分类">
              <el-select
                v-model="formDialog.fl"
                placeholder="请选择">
                <el-option
                  v-for="item in SHOUFALEIBIE.fl"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" v-if="formDialog.fl === '0'">
            <el-form-item prop="sfzj" label="是否质检">
              <div class="s-content">
                <el-switch
                  v-model="formDialog.sfzj"
                  on-color="#13ce66"
                  on-text="是"
                  off-text="否"
                  off-color="#ff4949"
                  on-value="1"
                  off-value="0">
                </el-switch>
              </div>
              <!--
              <el-select v-model="formDialog.sfzj" placeholder="请选择">
                <el-option
                  v-for="item in SHOUFALEIBIE.sfzj"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
              -->
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';
  function __form () {
    return {
      ddlx: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      mc: { value: '', rule: [ '' ], cRemarks: '' },
      fl: { value: '0', rule: [ 'vNull__change' ], cRemarks: '0入库单 1出库单' },
      sfzj: { value: '0', rule: [ 'vNull__change' ], cRemarks: '0不采集 1采集' },
    };
  }
  export default AutoVue({
    name: 'base_shoufaleibie-FEcarWms',
    head: {
      'title': '收发类别管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 收发类别 查看收发类别信息' },
      ],
    },
    data: {
      table: {
        column: [ { label: '货主名称',
          prop: 'mc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '类型名称',
          prop: 'ddlx',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '订单分类',
          prop: 'show_fl',
          minWidth: '0px',
          cRemarks: '0入库单 1出库单',
          search: true },
        { label: '质检',
          prop: 'sfzj',
          formatter: (row, column) => {
            return row[column.property || column] === '0' ? '不质检' : '质检';
          },
          elTag: {
            filterType: function (value) {
              return value === '1' ? 'success' : 'danger';
            },
          },
          minWidth: '0px',
          cRemarks: '0不质检 1质检',
          search: false } ],
        url: '/wmsOwnerOrderType/list',
        key: 'id',
        tableColumn: 4,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
      },
    },
    transition: 'slide-fade',
    store: ['DICTIONARY_shoufaleibie', 'SHOUFALEIBIE', 'USER'],
    methods: {
      getkuweiFocus (len) {
        let path = event.path;
        console.log(path);
        for (let i = 0, type = true; (i < path.length) && (type = true); i++) {
          let classname = path[i].className;
          if (classname !== '' && classname !== undefined) {
            if (classname.indexOf('el-form ') !== -1 || classname === 'el-form') {
              const DOM = path[i][len];
              DOM.focus();
              type = false;
            }
          }
        }
      },
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        if (!this.DICTIONARY_kuwei) {
          await this.USE('DICTIONARY_shoufaleibie');
        }
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          break;
        case 'PUT':
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), more),
          };
          this.dialog.row = more;
          break;
        }
        this.dialog.visible = true;
        setTimeout(() => {
          this.$refs.leixingmc.$el.children[0].focus();
        }, 100);
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            if (option.fl === '1') {
              delete option.sfzj;
            }
            try {
              await this.post('/wmsOwnerOrderType/add', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            if (option.fl === '1') {
              delete option.sfzj;
            }
            try {
              option.id = this.dialog.row.id;
              await this.post('/wmsOwnerOrderType/edit', option);
              let json = await this.get('/wmsOwnerOrderType/getWmsOwnerOrdertype/' + option.id);
              for (let index in this.dialog.row) {
                if (this.dialog.row.hasOwnProperty(index)) {
                  this.dialog.row[index] = json[index];
                }
              }
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .user{
    width: 88vw;
    float: left;
  }
  .form_item_user{
    margin-bottom: 0;
  }

  .upload-user {
    display: block;
    width: 100%;
    float: left;
    .el-upload {
      width: 100px;
      height: 100px;
      border-radius: 50% !important;
      border: 1px solid #fdfffb;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all .5s;
      &:hover {
        border: 1px solid #20a0ff;
        .avatar-uploader-icon{
          color: #20a0ff;
        }
      }
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100%;
      height: 100%;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .user .el-switch__label {
    span {
      font-size: 12px;
    }
  }

  .user .portrait .cell{
    padding: 0 10px;
  }

  .user .__transfer .el-checkbox__label{
    .label{
      padding-right: 5px;
    }
    .name{

    }
    .show_appId{
      color: #0affce;
    }
    .show_rentId{
      color: #d35e56;
    }
  }

</style>
